<template>
    <div class="headerContainer">
        <div class="headerContainer_top">
            <div class="header_left">
                <div class="headerIcon"></div>
                <div class="airIcon"></div>
            </div>
            <div class="header_right">
                <div class="header_operate">
                    <div class="header_operate_top">
                        <a class="header_calendar"><el-icon>
                                <Calendar />
                            </el-icon> &nbsp;{{ currentDate }}</a>
                        <a class="header_other" @click="toLogin">登录</a>
                        <a class="header_other" @click="toRegister">注册</a>
                    </div>
                    <div class="header_operate_bottom">
                        <el-input v-model="searchValue" size="large" style="width: 89%" :suffix-icon="searchIcon" />
                    </div>
                </div>
            </div>
        </div>
        <div class="headerContainer_bottom">
            <div class="operate">
                <div v-for="(item, index) in menuData" :class="{ 'active': selectedIndex === index }" :key="index"
                    @click="handleClick(index)"> <!-- 动态绑定图标 -->
                    <el-icon size="20">
                        <component :is="getIconComponent(item.icon)"></component>
                    </el-icon>
                    &nbsp; {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search as searchIcon } from '@element-plus/icons-vue'
import * as Icons from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import homeContent from "./homeContent.vue";
import apply from "./apply.vue";
const activeIndex = ref(0)   // 菜单点击的下标
const router = useRouter()

const currentDate = ref(new Date().toLocaleDateString())   // 当前日期
const searchValue = ref('')   // 搜索框
const menuData = ref([
    { name: '首页', routerPath: homeContent, icon: 'ElementPlus' },
    { name: '组件申请', routerPath: apply, icon: 'Tickets' },
    { name: '组件注册', routerPath: 'http://192.168.111.81:32441/cmc/login/developer?redirect=/cmc/register', icon: 'Grid' },
    { name: '组件发布', routerPath: 'http://192.168.111.81:32441/cmc/login/developer?redirect=/cmc/publish', icon: 'Monitor' },
    { name: '组件维护', routerPath: 'http://192.168.111.81:32441/cmc/login/developer?redirect=/cmc/my-component', icon: 'ZoomIn' },
    { name: '用户中心', routerPath: '', icon: 'UserFilled' },
])

// 默认选中第一个项
const selectedIndex = ref<number>(0);
const handleClick = (index: number) => {
    selectedIndex.value = index; // Set the clicked index
};

// 动态获取图标组件
const getIconComponent = (iconName: string) => {
    // console.log(Icons[iconName]);

    return Icons[iconName] || null; // 如果 iconName 存在，则返回对应的图标组件
};

function toLogin() {
    router.push({ name: "login" })
}
function toRegister() {
    router.push({ name: "register" })
}

defineExpose({
    selectedIndex,
    menuData
})
</script>

<style lang="scss" scoped>
.headerContainer {
    width: 100%;
    height: 100%;

    .headerContainer_top {
        height: 75%;
        background: url('../assets/image/header/header.png') 50% no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-wrap: nowrap;

        >div {
            width: 50%;
            height: 80%;
        }

        .header_left {
            display: flex;
            justify-content: flex-end;

            >div {
                width: 35%;
                height: 100%;
            }

            .airIcon {
                background: url('../assets/image/header/headerAir.png') 50% no-repeat;
                background-size: 100% 100%;
                opacity: 0.8;
            }

            .headerIcon {
                background: url(/src/assets/image/header/headerIcon.png) 5% 102% no-repeat;
                background-size: 65% 45%;
            }
        }

        .header_right {
            display: flex;
            justify-content: center;

            .header_operate {
                width: 40%;
                height: 100%;

                >div {
                    height: 50%;
                }

                .header_operate_bottom {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                }

                .header_operate_top {
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-end;
                    padding-top: 5%;

                    a {
                        color: #FFFFFF;
                        font-size: 0.7vw;
                        font-weight: normal;
                        text-decoration-line: none;
                        cursor: pointer;
                        position: relative;
                    }

                    a:hover {
                        text-decoration-line: underline;
                    }

                    .header_calendar {
                        width: 33%;
                        display: flex;
                        align-items: center;
                        position: relative;
                    }

                    .header_calendar::after {
                        content: "";
                        position: absolute;
                        border: 1px solid #fff;
                        z-index: 2;
                        height: 80%;
                        margin-left: 88.7%;
                        font-family: serif;
                        font-weight: bolder;
                    }

                    .header_other {
                        width: 13%;
                    }

                    .header_other::after {
                        content: "";
                        position: absolute;
                        border: 1px solid #fff;
                        z-index: 2;
                        height: 80%;
                        margin-top: 0.1%;
                        margin-left: 19.5%;
                        font-family: serif;
                        font-weight: bolder;
                    }
                }
            }
        }
    }

    .headerContainer_bottom {
        height: 25%;
        background-color: #0A61BD;
        display: flex;
        justify-content: center;

        .operate {
            width: 70%;
            display: flex;

            >div {
                width: 20%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 0.8vw;
                cursor: pointer;
            }


        }

        .operate>div.active {
            background-color: #4595E9;
            color: white;
        }
    }
}

.el-menu--horizontal {
    --el-menu-horizontal-height: 100%;
}

:deep(.el-input__wrapper) {
    background: transparent !important;
    border: 1px solid #fff;
}

:deep(.el-input__inner) {
    color: #fff;
}

:deep(.el-input .el-input__icon) {
    color: #fff;
}
</style>